<template>
  <div class="container">
    <div class="title">登录</div>
    <form class="input-group">
      <div class="input-a account">
        <input
          v-model="user.phoneNum"
          type="tel"
          placeholder="请输入手机号/用户名/邮箱"
        />
        <hr />
      </div>
      <div class="input-a password">
        <input
          v-model="user.password"
          type="password"
          class="mui-input-password"
          placeholder="请输入密码"
        />
        <hr />
      </div>
    </form>
    <button type="button" class="login-btn" @click="login">登录</button>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      user: {
        phoneNum: "",
        password: ""
      }
    };
  },
  mounted() {
    this.createDB();
    window.addEventListener(
      "scroll",
      this.throttle(() => {
        console.log("aaa");
      }, 300).bind(this)
    );
    // window.addEventListener(
    //   "input",
    //   this.debounce(() => {
    //     console.log("111");
    //   }, 1000)
    // );
  },
  methods: {
    login() {
      const user = this.user;
      let users={
        account:'15870861752',
        pws:'753159tu'
      }
      if (user.password == "" || user.phoneNum == "") {
        alert("用户名或密码不能为空!!!");
      } else {
        // 调用action来设置数据
        if (user.phoneNum == users.account && user.password == users.pws) {
          this.$store.dispatch("setUser", user);
          console.log(this.$store.state.currentUser);
          this.$router.back()
        }else{
          alert('账号或者密码错误')
        }
      }
    },
    createDB() {
      let db = openDatabase("user", "1.0", "Test DB", 2 * 1024 * 1024);
      db.transaction(function (tx) {
        tx.executeSql(
          "CREATE TABLE IF NOT EXISTS USERS (id unique,account,password)"
        );
        tx.executeSql(
          'INSERT INTO USERS (id, account,password) VALUES (1,"15870861752","753159tu")'
        );
      });
    },
    selectDB() {
      let result = {};
      let db = openDatabase("user", "1.0", "Test DB", 2 * 1024 * 1024);
 
      db.transaction(function (tx) {
        tx.executeSql("SELECT * FROM USERS", [], function (tx, results) {
          result['user']=results.rows.item(0).account
          result['pws']=results.rows.item(0).password
        });
      });
      return result;
    },
    //防抖
    // debounce(fn, delay) {
    //   let timer = null;
    //   return function () {
    //     if (!timer) {
    //       clearTimeout(timer);
    //     }
    //     timer = setTimeout(() => {
    //       fn();
    //     }, delay);
    //   };
    // },
    //节流
    throttle(fn, delay) {
      let flag = true;
      return function () {
        if (flag) {
          setTimeout(() => {
            fn();
            flag = true;
          }, delay);
        }
        flag = false;
      };
    },
  },
};
</script>
<style scoped>
.container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0 35px;
  background-color: #ffffff;
  background-image: url("./img/login_bg.jpg");
}
.title {
  font-size: 26px;
  color: #000;
  margin-top: 150px;
}
.input-group {
  margin-top: 40px;
}
input {
  width: 100%;
  height: 30px;
  margin-top: 20px;
  background: #00000000;
  border: 0;
  outline: none;
}
input::placeholder {
  font-size: 10px;
}
.login-btn {
  position: absolute;
  font-size: 16px;
  background-color: #e0dcd8;
  border-radius: 25px;
  border: solid #e0dcd8;
  width: 80%;
  height: 45px;
  margin-top: 50px;
  left: 10%;
}
input[type="password"]::-ms-reveal {
  display: none;
}
</style>
